<template>
	<view class="picker-list flex-1 flexc"
		:style="{'paddingBottom': paddingBottom + 'px'}"
		>
		<view class="picker-item flexr align-center"
			v-for="(child, index) in userStore.customerChilds" :key="index">
			<image class="picker-item-icon" :src="BuildImageUrl(child.headPortrait)"></image>
			<view class="picker-item-content flex-1 flexr align-center">
				<view class="flex-1 flexc item-text">
					<view class="name">
						{{ child.customerName }}
					</view>
					<view class="phone">
						{{ child.mobile }}
					</view>
				</view>
				<text v-if="child.current" class="current" >当前账户</text>
				<text v-else class="active" @click="switchAccount(child)">切换账户</text>
			</view>
		</view>
		
		<view id="add-container" class="add-container" @click="goAddNewAccounts">
			<image class="add-icon" src="@/static/add.png"></image>
			<text>新增成员</text>
		</view>
	</view>
</template>

<script setup>
import { BuildImageUrl } from '@/api/api';
import { onLoad, onShow } from '@dcloudio/uni-app'
import { boundingClientRect } from '@/tools/tools.js';
import { useUserStore } from '@/store/user'
import { ref, watch } from 'vue';
const userStore = useUserStore();
const paddingBottom = ref(0)
onShow(() => {
	uni.setNavigationBarTitle({
		title: '家庭成员'+`(${userStore.customerChilds.length})`
	})
	boundingClientRect('#add-container').then((rect) => {
		paddingBottom.value = rect.height;
	})
})
watch(userStore.customerChilds, (newVal) => {
	uni.setNavigationBarTitle({
		title: '家庭成员'+`(${newVal.length})`
	})
})
async function switchAccount(child) {
	uni.showLoading({
		title:"正在切换..."
	})
	await userStore.switchAccount(child.customerId, child.mobile);
	uni.showToast({
		title:"切换成功"
	})
}
function goAddNewAccounts() {
	uni.navigateTo({
		url:"/subpages/account/newMember"
	})
}
</script>

<style lang="scss">
	.picker-list {
		overflow-y: scroll;
		background-color: white;
	}
	.picker-item {
		height: 128rpx;
		min-height: 128rpx;
		padding: 0 32rpx;
		position: relative;
		&-icon {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 10rpx;
			border-radius: 100rpx;
		}
		&-content {
			border-bottom: 1rpx solid $divider-color;
		}
		.item-text {
			margin-left: 25rpx;
			padding-bottom: 10rpx;
			.name {
				font-size: 32rpx;
				color: $text-color1;
			}
			.phone {
				margin-top: 8rpx;
				color: $text-color2;
			}
		}
		// &.active {
		// 	background-color: rgba(52, 181, 160, 0.08);
		// }
		.current {
			color: rgba(181, 52, 52, 1);
		}
		.active {
			color: $primary-color;
			padding: 10rpx 0;
		}
		.check {
			width: 36rpx;
			height: 27rpx;
			position: absolute;
			right: 32rpx;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}
	.add-container {
		background-color: #F7F7F7;
		border-top: 1px solid #efefef;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding-bottom: env(safe-area-inset-bottom);
		height: 120rpx;
		min-height: 120rpx;
		color: $primary-color;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		.add-icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 13rpx;
		}
	}
</style>
